<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    ------------
    js 实现简单的增删改查
    ------------
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 800px;
            margin: 200px auto;
        }
        
        ul {
            float: left;
            list-style: none;
        }
        
        li {
            padding: 5px 8px;
            float: left;
            width: 115px;
        }
        
        span {
            margin-right: 5px;
            text-decoration: underline;
            color: blue;
            cursor: pointer;
        }
        
        ul:nth-child(1){
            color: white;
            background-color: deepskyblue;
        }
        button{
            width: 60px;
        }
        input{
            width: 100px;
        }
        .box1,.box2{
            margin-top: 5px;
        }
        h1{
            width: 130px;
            margin: 0 auto;
            margin-bottom: 30px;
        }
        #change1{
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>捐赠管理</h1>
        <div class="box1">受捐单位
            <select id="pri">
                <option selected>--请选择--</option>
                <option>红十字会</option>
                <option>壹基金</option>
                <option>中国慈善总会</option>
                <option>中国扶贫基金会</option>
            </select>
            <button id="search">查询</button>
            <button>上一页</button>
            <button>下一页</button>
        </div>
        <div class="box2">
            捐赠人：
            <input type="text" id="more1"/>
            受捐单位:
            <select id="more2">
                <option selected>--请选择--</option>
                <option>红十字会</option>
                <option>壹基金</option>
                <option>中国慈善总会</option>
                <option>中国扶贫基金会</option>
            </select>
            金额：
            <input type="text" id="more3"/>
            受捐日期：
            <input type="text" id="more4"/>
            <button id="more">新增</button>
        </div>
        <div id="box3">
            <ul>
                <li>序号</li>
                <li>捐赠人</li>
                <li>受捐单位</li>
                <li>金额</li>
                <li>受捐日期</li>
                <li>操作</li>
            </ul>
            <ul>
                <li>1</li>
                <li>成龙</li>
                <li class="ser">红十字会</li>
                <li>1000</li>
                <li>2013-07-08</li>
                <li>
                    <span class="change2">修改</span>
                    <span class="del">删除</span>
                </li>
            </ul>
            <ul>
                <li>2</li>
                <li>嘿嘿</li>
                <li class="ser">壹基金</li>
                <li>2000</li>
                <li>2013-07-08</li>
                <li>
                    <span class="change2">修改</span>
                    <span class="del">删除</span>
                </li>
            </ul>
            <ul>
                <li>3</li>
                <li>哈哈</li>
                <li class="ser">中国慈善总会</li>
                <li>3000</li>
                <li>2013-07-08</li>
                <li>
                    <span class="change2">修改</span>
                    <span class="del">删除</span>
                </li>
            </ul>
            <ul>
                <li>4</li>
                <li>佚名</li>
                <li class="ser">中国扶贫基金会</li>
                <li>4000</li>
                <li>2013-07-08</li>
                <li>
                    <span class="change2">修改</span>
                    <span class="del">删除</span>
                </li>
            </ul>
        </div>
        <ul id="change1">
            <li></li>
            <li><input type="text" id="change1-1"/></li>
            <li class="ser"><input type="text" id="change1-2"/></li>
            <li><input type="text"id="change1-3" /></li>
            <li><input type="text" id="change1-4"/></li>
            <li>
                <span id="sure">确定</span>
                <span id="chance">取消</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var ul=document.querySelectorAll("ul")
        var span=document.getElementsByTagName("span")
        var more=document.getElementById("more")
        var more1=document.getElementById("more1")
        var more2=document.getElementById("more2")
        var more3=document.getElementById("more3")
        var more4=document.getElementById("more4")
        var box3=document.getElementById("box3")
        var pri=document.getElementById("pri")
        var search=document.getElementById("search")
        var ser=document.getElementsByClassName("ser")
        var change1=document.getElementById("change1")
        var change2=document.getElementsByClassName("change2")
        var del=document.getElementsByClassName("del")
        var cha1=document.getElementById("change1-1")
        var cha2=document.getElementById("change1-2")
        var cha3=document.getElementById("change1-3")
        var cha4=document.getElementById("change1-4")
        var sure=document.getElementById("sure")
        var chance=document.getElementById("chance")
        //改
        var chan;
        var inp=change1.getElementsByTagName("input")
        for(var i=0;i<change2.length;i++){
            (function(e){
                change2[e].onclick=function(){
                    change1.style.display = "block";
                    chan=this.parentNode.parentNode
                }
            })(i)
        }
        //确定
        sure.onclick=function(){
            var chan_li=chan.getElementsByTagName("li")
            chan_li[1].innerText=cha1.value
            chan_li[2].innerText=cha2.value
            chan_li[3].innerText=cha3.value
            chan_li[4].innerText=cha4.value
            change1.style.display = "none";
//				赋值后清空文本框内容
            for(var i=0;i<inp.length;i++){
                inp[i].value=""
            }
        }
        //取消
        chance.onclick=function(){
            change1.style.display = "none";
            for(var i=0;i<inp.length;i++){
                inp[i].value=""
            }
        }
        //删
        var chan;
        for(var i=0;i<del.length;i++){
            (function(e){
                del[e].onclick=function(){
                    var bool = confirm("是否删除这行");
                    if(bool){
                        var del =this.parentNode.parentNode
                        del.remove()
                    }
                    
//						}else if(this.innerText=="修改"){
//							change1.style.display = "block";
//							chan=this.parentNode.parentNode
//						}else if(this.innerText=="确定"){
//							var chan_li=chan.getElementsByTagName("li")
//							chan_li[1]=cha1.innerText
//							chan_li[2]=cha1.innerText
//							chan_li[3]=cha1.innerText
//							chan_li[4]=cha1.innerText
//						}
                }
            })(i)
        }
        //增
        //获取下拉框的文本
        var abc
        more2.onchange=function(){
            var index=more2.selectedIndex
            abc=more2[index].innerText
        }
        more.onclick=function(){
            //新增ul
            var ul1= document.createElement("ul")
            //ul赋值内容
            ul1.innerHTML="<li>"+ul.length+"</li><li>"+more1.value+"</li><li class='ser'>"+abc+"</li><li>"+more3.value+"</li><li>"+more4.value+"</li><li><span class='change2'>修改</span> <span class='del'>删除</span></li>"
            box3.appendChild(ul1)
            //给新增的子元素绑定事件
            var new1=ul1.lastChild.lastChild
            new1.onclick=function(){
                var bool = confirm("是否删除这行");
                if(bool){
                    var del =this.parentNode.parentNode
                    del.remove()
                }
            }
        }
        //查
        //获取查找下拉框的文本
        var bcd
        pri.onchange=function(){
            var index=pri.selectedIndex
            bcd=pri[index].innerText
        }
        search.onclick=function(){
            var ul=document.querySelectorAll("ul")
            //找到和下拉框文本一样的行
            for(var j=0;j<ser.length;j++){
                if(bcd == ser[j].innerText){
                    var str=ser[j].parentNode;
                    console.log(str)
                }
            }
            //删除所有行
            for(var k=1;k<ul.length;k++){   
                ul[k].remove()
            }
            //添加找到的行
            box3.appendChild(str)
        }
    </script>
</body>
<!-- <script src="./js.js"></script> -->
</html>